<script lang="ts"></script>

<template>
  <uni-section title="输入你的个人信息" type="line">
    <view class="example">
      <uni-forms ref="baseForm" :modelValue="userFormData">
        <uni-forms-item label="姓名" required>
          <uni-easyinput v-model="userFormData.name" placeholder="请输入姓名" />
        </uni-forms-item>
      </uni-forms>
    </view>

    <view class="img-container">
      <uni-section title="选择图片作为头像" type="line">
        <view class="img-select-body">
          <view>
            <image :src="userFormData.avatar" class="uploadImg"> </image>
          </view>
          <button hover-class="button-hover" @click="onUploadFileButton">
            <text>选择上传头像</text>
          </button>
        </view>
      </uni-section>
    </view>

    <view class="submit">
      <button @tap="submitFormData">提交</button>
    </view>
  </uni-section>

  <!-- 测试 -->
</template>

<script lang="ts" setup>
import { updateUserInfo } from "@/api/auth/user";
import { useMemberStore } from "@/stores";
import type { UserProfileSubmitDTO } from "@/types/myInfo";
import { uploadImageUrL } from "@/api/meida/file";
import { ref } from "vue";
import { uploadFile } from "@/api/meida/file";

// 用户数据
const memberStore = useMemberStore();

// 基础表单数据
const userFormData = ref({
  name: memberStore.profile.name,
  avatar: memberStore.profile.avatar,
});

const submitFormData = async () => {
  console.log(userFormData.value);
  let updateInfo: UserProfileSubmitDTO = {};
  // 实现不空的数据才加入updateInfo
  if (userFormData.value.name != null && userFormData.value.name.length > 0) {
    updateInfo.username = userFormData.value.name;
  }

  if (
    userFormData.value.avatar != null &&
    userFormData.value.avatar.length > 0
  ) {
    updateInfo.avatar = userFormData.value.avatar;
  }

  try {
    let res = await updateUserInfo(updateInfo);
    console.log(res);
    if (res.code) {
      // 更新本地useMeberStore
      const profile = useMemberStore().profile;
      if (res.data.username != null && res.data.username.length > 0) {
        profile.name = res.data.name;
      }
      if (res.data.phone != null && res.data.phone.length > 0) {
        profile.phone = res.data.phone;
      }
      if (res.data.avatar != null && res.data.avatar.length > 0) {
        profile.avatar = res.data.avatar;
      }
      useMemberStore().setProfile(profile);
      // 显示成功信息

      uni.showToast({
        title: "更新成功",
        duration: 2000,
      });
      // 设置时间间隔
      setTimeout(() => {
        uni.switchTab({
          url: "/pages/my/my",
        });
      }, 800);
    } else {
      new Error("更新失败");
    }
  } catch (e) {
    uni.showToast({
      title: "更新失败",
      icon: "fail",
      duration: 1000,
    });
  }
};

// 上传文件
const onUploadFileButton = async () => {
  const res = await uploadFile("image", "image", undefined, "image");
  console.log("uploadFile", res);
  // 更新头像
  userFormData.value.avatar = res.wrapper.url;
};
</script>

<style lang="scss" scoped>
@import "/src/assert/styles/variables.scss";

.img-container {
  .img-select-body {
    padding: 10px;
    padding-top: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;

    button {
      display: flex;
      justify-content: stretch;
      text-align: center;
      background-color: $el-secondary-color;
    }
    image {
      height: 200rpx;
      width: 200rpx;
      border-radius: 10rpx;
      background-color: rgb(192, 196, 196);
    }
  }
}

.text {
  font-size: 14px;
  color: #333;
}

.submit {
  margin: 10px;
  button {
    background-color: $el-primary-color;
  }
}
</style>
